<script setup>
	import { onMounted,ref } from 'vue';
	import banner from './components/banner.vue'
	import bodyVue from './components/bodyVue.vue'
	import footerVue from './components/footerVue.vue'
	
	const topShow=ref(false);
	onMounted(()=>{
		window.addEventListener("scroll",()=>{// 滚动事件
		    let html =document.documentElement 
		    if (html.scrollTop>=100) {//当滚动高度大于等于100返回顶部出现
		        topShow.value=true
		    } else {
		        topShow.value=false
		    }
		})
	})
</script>

<template>
	<!-- 导航 -->
	<div class="topBar">
		<!-- blackBar -->
		<div class="top" style="background: #242424;">
			<nav class="container d-flex align-items-center">
				<h1 class="logo">
					<a href="#"></a>
				</h1>
				<div class="navList">
					<ul class="navUl d-flex align-items-center">
						<li class="fst"><a href="#">发现音乐</a></li>
						<li><a href="#">我的音乐</a></li>
						<li><a href="#">关注</a></li>
						<li><a href="#">商城</a></li>
						<li><a href="#">音乐人</a></li>
						<li><a href="#">云推歌</a></li>
						<li><a href="#">下载客户端</a></li>
					</ul>
				</div>
				<div class="search mx-2">
					<span class="searchImg">
						<input type="search" placeholder="音乐/视频/电台/用户">
					</span>
				</div>
				<div class="rightAth d-flex align-items-center">
					<div class="author">
						<a href="#" style="color: #ccc;">创作者中心</a>
					</div>
					<div class="login ms-2">
						<a href="#">登录</a>
					</div>
				</div>
			</nav>
		</div>
		
		<!-- redBar -->
		<div class="red bg-danger" style="height: 35px;">
			<div class="redBar container h-100">
				<ul class="RedNav nav h-100 align-items-center">
					<li class="firstLi"><a href="#"><span class="firstSpan">推荐</span></a></li>
					<li><a href="#"><span>排行榜</span></a></li>
					<li><a href="#"><span>歌单</span></a></li>
					<li><a href="#"><span>主播电台</span></a></li>
					<li><a href="#"><span>歌手</span></a></li>
					<li><a href="#"><span>新碟上架</span></a></li>
				</ul>
			</div>
		</div>
		
	</div>
	<banner></banner>
	<!-- body -->
	<body-vue></body-vue>
	<!-- footer -->
	<footer-vue></footer-vue>
	<a href="#" target="_top" class="back" title="回到顶部" v-show="topShow"></a>
</template>

<style scoped>
	/* public */
	ul,ol,li,h1,input{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	a{
		display: inline-block;
		text-decoration: none;
		color: #fff;
	}
	/* logo */
	.top .logo{
		width: 176px;
		height: 69px;
	}
	.logo a {
		display: inline-block;
		width: 157px;
		height: 100%;
		margin-right: 20px;
	}
	.logo,.searchImg{
		background: url('./assets/topbar.png') no-repeat;
	}
	.container {
		max-width: 1200px;
	}
	/* ul */
	.navUl a{
		height: 70px;
		line-height: 70px;
		padding: 0 19px;
		font-size: 14px;
		color: #ccc;
	}
	.navUl li{
		height: 70px;
		text-align: center;
	}
	.fst a,.navUl a:hover{
		background-color: #000;
		color: #fff;
	}
	/* 搜索框 */
	.search{
		width: 158px;
		height: 32px;
		background-color: #fff;
		border-radius: 32px;
	}
	.search input{
		width: 78%;
		background: transparent;
		border: none;
		color: #9b9b9b;
		font-size: 12px;
		text-align: center;
		outline: none;
	}
	.search input:focus{
		text-align: left;
	}
	.searchImg{
		width: 100%;
		height: 100%;
		line-height: 30px;
		display: inline-block;
		text-align: right;
		background-position: 0 -99px;
		/* background: url('./assets/topbar.png') no-repeat 0px -99px; */
	}
	/* 创作者中心 */
	.rightAth .author{
		width: 90px;
		height: 32px;
		line-height: 32px;
		margin: 0 12px;
		text-align: center;
		border: 1px solid #4F4F4F;
		border-radius: 20px;
		font-size: 12px;
	}
	.author:hover{
		border: 1px solid #ccc;
	}
	.login a{
		display: block;
		width: 28px;
		color: #787878;
		font-size: 12px;
	}
	.login:hover a{
		color: #ccc;
	}
	/* redBar */
	.RedNav{
		margin-left: 180px;
	}
	.RedNav li{
		height: 100%;
		line-height: 30px;
		position: relative;
	}
	.RedNav a{
		font-size: 12px;
		padding-left: 17px;
		padding-right: 17px;
	}
	.RedNav span{
		padding: 0 13px;
	}
	.firstSpan,.RedNav li:hover span{
		display: inline-block;
		text-align: center;
		height: 20px;
		line-height: 20px;
		background: #9B0909;
		border-radius: 20px;
	}
	.RedNav li:hover a{
		color: #fff;
	}
	/* 三角形 */
	.firstLi::before{
		content: '';
		display: inline-block;
		width: 20px;
		height: 7px;
		overflow: hidden;
		background: url('./assets/topbar.png') no-repeat -224px 1px;
		position: absolute;
		top: -6px;
		left: 35px;
	}
	/* 回到顶部 */
	.back{
		display: block;
		position: fixed;
		text-indent: -9999px;
		left: 50%;
		margin-left: 500px;
		bottom: 160px;
		width: 49px;
		height: 44px;
		background: url('../src/assets/footer/sprite.png')no-repeat;
		background-position: -265px -47px;
	}
	.back:hover{
		background-position: -325px -47px;
	}
</style>